
  <template>
  <!--考勤管理-休假申请-待我审批-->
  <div class="bf-commont-template">
    <div class="clearfix bf-top-button">
      <div class="float-r">
        <div class="float-l">
          <el-input placeholder="请输入申请名称搜索" prefix-icon="el-icon-search" v-model="searchData" @keyup.enter.native="quickSearch"></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick" class="margin-l margin-r">
      <el-tab-pane :label="'休假申请审批'+ tabs.vacationCount" name="vacation">
        <bf-table :data="vacationData" :setting="setting1" :rowAction="rowAction" @pageChange="pageChange" ref="table1"></bf-table>
      </el-tab-pane>

      <el-tab-pane :label="'出行申请审批'+ tabs.outsideCount" name="outside">
        <bf-table :data="outsideData" :setting="setting2" :rowAction="rowAction2" @pageChange="pageChange" ref="table2"></bf-table>
      </el-tab-pane>

      <el-tab-pane :label="'出行报销申请审批'+ tabs.approveCount" name="other">
        <bf-table :data="otherData" :setting="setting3" :rowAction="rowAction3" @pageChange="pageChange" ref="table3"></bf-table>
      </el-tab-pane>

      <el-tab-pane :label="'拜访客户申请审批'+ tabs.visitCount" name="visit">
        <bf-table :data="visitData" :setting="visitListSetting" :rowAction="visitRowAction" @pageChange="pageChange" ref="vistiTable"></bf-table>
      </el-tab-pane>

      <el-tab-pane :label="'拜访客户报销审批'+ tabs.visitApproveCount" name="visitApprove">
        <bf-table :data="visitApproveData" :setting="visitApproveListSetting" :rowAction="visitApproveRowAction" @pageChange="pageChange" ref="visitApproveTable"></bf-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 高级搜索 -->
    <bf-table-search :editForm='searchSetting' ref='searchRosterRef' @formSubmit='searchRosterSubmit'></bf-table-search>

    <!--休假详情-->
    <bf-table-detail :rowNum="2" :width="800" :title="'休假申请详情'" ref="vacationDetailRef" :editForm="vacationDetailSetting" :showHistory='true' :approveSetting='approveSetting1'></bf-table-detail>
    <!--休假编辑 -->
    <bf-table-edit :rowNum="2" :width="800" :editRules = "addRules" :title="'休假申请审批'" :submitButtons="submitButtons1" :editForm='vacationApproveSetting' ref='editRosterRef1' :showHistory='true' :approveSetting='approveSetting1'></bf-table-edit>

    <!-- 出行申请-详情 -->
    <bf-table-detail :title="'出行申请-详情'" ref="detail2" :rowNum="2" :width="800" :showHistory='true' :approveSetting='approveSetting2' :editForm='setting21'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标目的地</div>
          <div></div>
        </div>
        <bf-table :data="detailData2.attendanceAddrList" :setting="addrSetting" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-detail>

    <!-- 出行申请-审批 -->
    <bf-table-edit :editRules = "addRules" :title="'出行申请-审批'" ref="edit2" :submitButtons="submitButtons2" :rowNum="2" :width="800" :editForm='setting2' :showHistory='true' :approveSetting='approveSetting2'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标目的地</div>
          <div></div>
        </div>
        <bf-table :data="detailData2.attendanceAddrList" :setting="addrSetting" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-edit>

    <!-- 报销-详情 -->
    <bf-table-detail :title="'报销-详情'" ref="detail3" :rowNum="2" :width="800" :editForm='setting32' :showHistory='true' :approveSetting='approveSetting3'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标目的地</div>
          <div></div>
        </div>
        <bf-table :data="targetCustDate" :setting="addrSetting" :hiddenPagination="true"></bf-table>
      </template>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>实际目的地</div>
          <div></div>
        </div>
        <bf-table :data="realCustDate" :setting="addrSetting" :hiddenPagination="true"></bf-table>
      </template>

      <template slot="cost">
        <div class="bf-table-title clearfix">
          <div>报销费用</div>
          <div></div>
        </div>
        <bf-table :data="detailData3.costBeanList" :setting="costSetting" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-detail>

    <!-- 报销-审批 -->
    <bf-table-edit :editRules = "addRules" :title="'报销-审批'" ref="edit3" :submitButtons="submitButtons3" :rowNum="2" :width="800" :editForm='setting3' :showHistory='true' :approveSetting='approveSetting3'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标目的地</div>
          <div></div>
        </div>
        <bf-table :data="targetCustDate" :setting="addrSetting" :hiddenPagination="true"></bf-table>
      </template>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>实际目的地</div>
          <div></div>
        </div>
        <bf-table :data="realCustDate" :setting="addrSetting" :hiddenPagination="true"></bf-table>
      </template>

      <template slot="cost">
        <div class="bf-table-title clearfix">
          <div>报销费用</div>
          <div></div>
        </div>
        <bf-table :data="detailData3.costBeanList" :setting="costSetting" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-edit>

    <!--:showHistory='true' :approveSetting='approveSetting2' -->


    <!--拜访客户对应的table-->

    <!-- 拜访申请-详情 -->
    <bf-table-detail :title="'拜访客户申请-详情'" ref="visitDetail" :rowNum="2" :showHistory='true' :approveSetting='approveSetting4' :width="800" :editForm='visitListSetting2'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标客户</div>
          <div></div>
        </div>
        <bf-table :data="visitDetailData.attendauceVisitList" :setting="customer" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-detail>

    <!-- 拜访申请-审批 -->
    <bf-table-edit :editRules = "addRules"  :title="'拜访客户申请-审批'" ref="visitApprove" :submitButtons="visitSubmitButtons" :rowNum="2" :width="800" :editForm='visitListSetting' :showHistory='true' :approveSetting='approveSetting2'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标客户</div>
          <div></div>
        </div>
        <bf-table :data="visitDetailData.attendauceVisitList" :setting="customer" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-edit>

    <!--拜访客户报销审批-->

    <bf-table-edit  :editRules = "addRules"  :title="'拜访客户报销-审批'" ref="visitReimbursementApprove" :submitButtons="visitReimbursementSubmitButtons" :rowNum="2" :width="800" :editForm='setting3'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标客户</div>
          <div></div>
        </div>
        <bf-table :data="targetCustDate" :setting="customer" :hiddenPagination="true"></bf-table>
      </template>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>实际客户</div>
          <div></div>
        </div>
        <bf-table :data="realCustDate" :setting="customer" :hiddenPagination="true"></bf-table>
      </template>

      <template slot="cost">
        <div class="bf-table-title clearfix">
          <div>报销费用</div>
          <div></div>
        </div>
        <bf-table :data="detailData5.costBeanList" :setting="costSetting" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-edit>

    <bf-table-detail :title="'拜访客户报销-详情'" ref="visitReimbursementDetail" :rowNum="2" :width="800" :editForm='setting32' :showHistory='true' :approveSetting='approveSetting5'>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>目标客户</div>
          <div></div>
        </div>
        <bf-table :data="targetCustDate" :setting="customer" :hiddenPagination="true"></bf-table>
      </template>
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>实际客户</div>
          <div></div>
        </div>
        <bf-table :data="realCustDate" :setting="customer" :hiddenPagination="true"></bf-table>
      </template>

      <template slot="cost">
        <div class="bf-table-title clearfix">
          <div>报销费用</div>
          <div></div>
        </div>
        <bf-table :data="detailData5.costBeanList" :setting="costSetting" :hiddenPagination="true"></bf-table>
      </template>
    </bf-table-detail>

  </div>
</template>

<script>
import { setting32, setting21, visitListSetting2, addrSetting, vacationDetailSetting, customer, costSetting, setting2, setting3, setting1, vacationApproveSetting, visitListSetting, visitApproveListSetting } from './table.setting.js'
import {
  findVacationIngApi,
  findOutsideIngApi,
  findStatusCountApi,
  findReimburseIngApi,
  outsideBackApi,
  reimburseBackApi,
  getOutSideDataApi,
  getCostData,
  getCostDataApi,
  dealVacationApi,
  findVisitList,
  getVisitDetail,
  findReimbursementList
} from './api.js'
import { searchSetting } from './form.setting'
export default {
  data() {
    return {
      setting32: setting32,
      setting21: setting21,
      visitListSetting2: visitListSetting2,
      approveSetting1: {
        procDefKey: 'attendance-vacation',
        businessKey: ''
      },
      approveSetting2: {
        procDefKey: 'attendance-outside',
        businessKey: ''
      },
      approveSetting3: {
        procDefKey: 'attendance-reimburse',
        businessKey: ''
      },
      approveSetting4: {
        procDefKey: 'attendance-customer',
        businessKey: ''
      },
      approveSetting5: {
        procDefKey: 'attendance-reimburse',
        businessKey: ''
      },
      costSetting: costSetting,
      customer: customer,
      customerDate: [], // 客户数据
      realCustDate: [], // 实际客户
      targetCustDate: [], // 目标客户

      detailData2: {},
      detailData3: {},
      detailData5: {},
      otherData: [],
      visitData: [],
      visitApproveData: [],
      searchData: '',
      vacationData: [],
      outsideData: [],
      visitDetailData: [],
      searchSetting: searchSetting,
      addrSetting: addrSetting,
      submitButtons3: [ // 报销
        {
          title: '通过',
          click: (form) => {
            form.action = 1
            delete form.attendauceVisitList
            delete form.costBeanList
            reimburseBackApi(form).then(response => {
              this.$message({
                message: '申请审批通过成功',
                type: 'success'
              })
              this.getList()
              this.$refs.edit3.hidden()
            })
          }
        },
        {
          title: '退回',
          click: (form) => {
            form.action = 0
            delete form.attendauceVisitList
            delete form.costBeanList
            reimburseBackApi(form).then(response => {
              this.$message({
                message: '申请退回成功',
                type: 'success'
              })
              this.getList()
              this.$refs.edit3.hidden()
            })
          }
        },
        {
          title: '取消',
          validate: false,
          click: (form) => {
            // console.log(form)
            this.$refs.edit3.hidden()
          }
        }
      ],


      visitReimbursementSubmitButtons: [ // 报销
        {
          title: '通过',
          click: (form) => {
            form.action = 1
            delete form.attendauceVisitList
            delete form.costBeanList
            form.type = '2'
            reimburseBackApi(form).then(response => {
              this.$message({
                message: '申请审批通过成功',
                type: 'success'
              })
              this.getList()
              this.$refs.visitReimbursementApprove.hidden()
            })
          }
        },
        {
          title: '退回',
          click: (form) => {
            form.action = 0
            form.type = '2'
            delete form.attendauceVisitList
            delete form.costBeanList
            reimburseBackApi(form).then(response => {
              this.$message({
                message: '申请退回成功',
                type: 'success'
              })
              this.getList()
              this.$refs.visitReimbursementApprove.hidden()
            })
          }
        },
        {
          title: '取消',
          validate: false,
          click: (form) => {
            this.$refs.visitReimbursementApprove.hidden()
          }
        }
      ],
      rowAction3: [ // 报销
        {
          title: '详情',
          click: (item) => {
            // console.log(item)
            // this.$refs.table3.showDetail(item)
            const id = item.scope.row.outsideId
            this.approveSetting3.businessKey = id
            getCostData(id).then(response => {
              this.targetCustDate = []
              this.realCustDate = []
              this.detailData3 = response.data
              if (response.data.attendanceAddrList) {
                response.data.attendanceAddrList.forEach((v, i) => {
                  if (v.flag === '1') {
                    this.targetCustDate.push(v)
                  } else {
                    this.realCustDate.push(v)
                  }
                })
              }
              this.$refs.detail3.show(this.detailData3)
            })
          }
        },
        {
          title: '审批',
          hiddenStatus: (row) => {
            // console.log(row)
            if (row.status === '2' && row.taskDefKey === 'approve') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            const id = item.scope.row.outsideId
            this.approveSetting3.businessKey = id
            getCostData(id).then(response => {
              this.targetCustDate = []
              this.realCustDate = []
              this.detailData3 = response.data
              if (response.data.attendanceAddrList) {
                response.data.attendanceAddrList.forEach((v, i) => {
                  if (v.flag === '1') {
                    this.targetCustDate.push(v)
                  } else {
                    this.realCustDate.push(v)
                  }
                })
              }
              this.$refs.edit3.show(this.detailData3)
            })
          }
        }
      ],
      submitButtons1: [ // 休假
        {
          title: '通过',
          validate: true,
          click: (form) => {
            this.$refs.editRosterRef1.hidden()
            this.vacationPass(form)
          }
        },
        {
          title: '退回',
          click: (form) => {
            // console.log(form)
            this.$refs.editRosterRef1.hidden()
            this.vacationBack(form)
          }
        },
        {
          title: '取消',
          validate: false,
          click: (form) => {
            this.$refs.editRosterRef1.hidden()
          }
        }
      ],
      submitButtons2: [ // 出行
        {
          title: '通过',
          validate: true,
          click: (form) => {
            form.action = 1
            delete form.attendauceVisitList
            delete form.costBeanList
            outsideBackApi(form).then(response => {
              if (response.success) {
                this.$message({
                  message: '申请审批通过成功',
                  type: 'success'
                })
                this.$refs.edit2.hidden()
                this.getList()
              }
            })
          }
        },
        {
          title: '退回',
          click: (form) => {
            form.action = 0
            delete form.attendauceVisitList
            delete form.costBeanList
            outsideBackApi(form).then(response => {
              if (response.success) {
                this.$message({
                  message: '申请退回成功',
                  type: 'success'
                })
                this.$refs.edit2.hidden()
                this.getList()
              }
            })
          }
        },
        {
          title: '取消',
          validate: false,
          click: (form) => {
            this.$refs.edit2.hidden()
          }
        }
      ],


      visitSubmitButtons: [
        {
          title: '通过',
          validate: true,
          click: (form) => {
            form.action = 1
            form.status = '1'
            form.type = '2'
            delete form.attendauceVisitList
            delete form.costBeanList
            outsideBackApi(form).then(response => {
              if (response.success) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.$refs.visitApprove.hidden()
                this.getList()
              }
            })
          }
        },
        {
          title: '退回',
          click: (form) => {
            form.action = 0
            form.status = '1'
            form.type = '2'
            delete form.attendauceVisitList
            delete form.costBeanList
            outsideBackApi(form).then(response => {
              if (response.success) {
                this.$message({
                  message: '申请退回成功',
                  type: 'success'
                })
                this.$refs.visitApprove.hidden()
                this.getList()
              }
            })
          }
        },
        {
          title: '取消',
          validate: false,
          click: (form) => {
            this.$refs.visitApprove.hidden()
          }
        }

      ],
      tabs: {
        vacationCount: 0,
        outsideCount: 0,
        approveCount: 0
      },
      activeName: 'vacation',
      rowAction: [
        {
          label: '详情',
          click: (item) => {
            const id = item.scope.row.id
            this.approveSetting1.businessKey = id
            this.$refs.vacationDetailRef.show(item.scope.row)
            // 根据状态判断是出行还是报销的详情页面
            // this.findDetailById(item.scope.row.outsideId, this.$refs.bfTableDetail.show)
            // this.$refs.table1.show(item)
          }
        },
        {
          label: '审批',
          hiddenStatus: (row) => {
            if (row.status === '1' && row.taskDefKey === 'approve') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            const id = item.scope.row.id
            this.approveSetting1.businessKey = id
            if (item.scope.row.status === '1' && item.scope.row.taskDefKey === 'approve') {
              this.$refs.editRosterRef1.show(item.scope.row)
            } else {
              this.$message({
                message: '该状态不可审批',
                type: 'error'
              })
              return false
            }

            // this.$refs.editRosterRef1.show(item.scope)
          }
        }
      ],
      rowAction2: [// 出行申请
        {
          label: '详情',
          click: (item) => {
            const id = item.scope.row.outsideId
            this.approveSetting2.businessKey = id
            getOutSideDataApi(id).then(response => {
              this.detailData2 = response.data
              this.$refs.detail2.show(this.detailData2)
            })
          }
        },
        {
          label: '审批',
          hiddenStatus: (row) => {
            if (row.status === '1' && row.taskDefKey === 'approve') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            // 出行审批
            const row = item.scope.row
            if (row.status === '1' && row.taskDefKey === 'approve') {
              const id = item.scope.row.outsideId
              this.approveSetting2.businessKey = id
              getOutSideDataApi(id).then(response => {
                this.detailData2 = response.data
                this.$refs.edit2.show(this.detailData2)
              })
            } else {
              this.$message({
                message: row.statusName + ', 不可审批',
                type: 'error'
              })
            }
          }
        }
      ],


      visitRowAction: [// 拜访客户
        {
          label: '详情',
          click: (item) => {
            const id = item.scope.row.outsideId
            this.approveSetting4.businessKey = id
            getVisitDetail(id).then(response => {
              this.visitDetailData = response.data
              this.$refs.visitDetail.show(response.data)
            })
          }
        },
        {
          label: '审批',
          hiddenStatus: (row) => {
            if (row.status === '1' && row.taskDefKey === 'approve') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            const row = item.scope.row
            if (row.status === '1' && row.taskDefKey === 'approve') {
              const id = item.scope.row.outsideId
              this.approveSetting2.businessKey = id
              getVisitDetail(id).then(response => {
                this.visitDetailData = response.data
                this.$refs.visitApprove.show(this.visitDetailData)
              })
            } else {
              this.$message({
                message: row.statusName + ', 不可审批',
                type: 'error'
              })
            }
          }
        }
      ],

      visitApproveRowAction: [ // 拜访客户报销
        {
          title: '详情',
          click: (item) => {
            const id = item.scope.row.outsideId
            this.approveSetting5.businessKey = id
            getCostDataApi(id).then(response => {
              this.targetCustDate = []
              this.realCustDate = []
              this.detailData5 = response.data
              if (response.data.attendauceVisitList) {
                response.data.attendauceVisitList.forEach((v, i) => {
                  if (v.flag === '1') {
                    this.targetCustDate.push(v)
                  } else {
                    this.realCustDate.push(v)
                  }
                })
              }
              this.$refs.visitReimbursementDetail.show(this.detailData5)
            })
          }
        },
        {
          title: '审批',
          hiddenStatus: (row) => {
            if (row.status === '2' && row.taskDefKey === 'approve') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            // console.log(item)
            const id = item.scope.row.outsideId
            this.approveSetting3.businessKey = id
            getCostDataApi(id).then(response => {
              this.targetCustDate = []
              this.realCustDate = []
              this.detailData5 = response.data
              if (response.data.attendauceVisitList) {
                response.data.attendauceVisitList.forEach((v, i) => {
                  if (v.flag === '1') {
                    this.targetCustDate.push(v)
                  } else {
                    this.realCustDate.push(v)
                  }
                })
              }
              this.$refs.visitReimbursementApprove.show(this.detailData5)
            })
          }
        }
      ],
      setting2: setting2,
      setting3: setting3,
      setting1: setting1,
      vacationApproveSetting: vacationApproveSetting,
      vacationDetailSetting: vacationDetailSetting,
      visitListSetting: visitListSetting,
      visitApproveListSetting: visitApproveListSetting,
      addRules: {
        approvalOpinion: [
          { required: true, message: '审批意见必填', trigger: 'blur' }
        ]
      },
      searchParams: { // 搜索条件
        page: 1
      }
    }
  },
  mounted: function() {
    this.getList()
  },
  methods: {
    vacationPass(form) {
      form.action = 1
      dealVacationApi(form).then(response => {
        if (response.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    vacationBack(form) {
      /**
       * 休假申请退回
       */
      // console.log(form)
      form.action = 0
      dealVacationApi(form).then(response => {
        if (response.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    getTabs() {
      const params = {
        status: 1
      }
      findStatusCountApi(params).then(response => {
        // console.log(response)
        if (response.data) {
          response.data.forEach(v => {
            if (v.verifyType === '1') {
              this.tabs.vacationCount = v.count
            }
            if (v.verifyType === '2') {
              this.tabs.outsideCount = v.count
            }
            if (v.verifyType === '3') {
              this.tabs.approveCount = v.count
            }

            if (v.verifyType === '4') {
              this.tabs.visitCount = v.count
            } if (v.verifyType === '5') {
              this.tabs.visitApproveCount = v.count
            }
          })
        }
      })
    },
    getList() {
      const params = this.searchParams
      this.getTabs()
      if (this.activeName === 'vacation') { // 休假申请
        findVacationIngApi(params).then(response => {
          this.vacationData = response
        })
        return
      }

      if (this.activeName === 'outside') { // 出行申请
        params.type = '1'
        findOutsideIngApi(params).then(response => {
          this.outsideData = response
        })
        return
      }
      if (this.activeName === 'other') { // 出行申请
        params.type = '1'
        findReimburseIngApi(params).then(response => {
          this.otherData = response
        })
        return
      }
      // findVisitList,findReimbursementList
      if (this.activeName === 'visit') { // 出行申请
        params.type = '2'
        findVisitList(params).then(response => {
          this.visitData = response
        })
        return
      }

      if (this.activeName === 'visitApprove') { // 出行申请
        params.type = '2'
        findReimbursementList(params).then(response => {
          this.visitApproveData = response
        })
        return
      }
    },

    searchRosterSubmit(form) {
      /**
       * 高级搜索
       */
      this.searchParams.page = 1
      this.searchParams.employeeName = form.employeeName
      this.searchParams.applyName = form.applyName
      this.searchParams.status = form.status

      this.getList()
      this.$refs.searchRosterRef.hiden()
    },
    pageChange(pageObj) {
      this.searchParams.page = pageObj.page
      this.searchParams.pageSize = pageObj.pageSize
      this.getList()
    },
    showSearch() {
      this.$refs.searchRosterRef.show()
    },
    quickSearch() {
      this.searchParams.applyName = this.searchData
      this.getList()
    },
    handleClick(tab, event) {
      this.searchParams.status = 1
      this.searchParams.page = 1
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
